<!--这是编辑资料组件-->
<template>
	<div style="padding-bottom: 30px;">
		<div class="addBox">
			<h3><span>编辑资料</span></h3>
			<div style="margin: 0 20px;">
				<p style="line-height: 36px;">已上传列表：</p>
				<table>
					<tr>
						<th>资料名称</th>
						<th>大小</th>
						<th>格式</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>{{uploadDatumData.name}}</td>
						<td>{{uploadDatumData.size}}</td>
						<td>{{uploadDatumData.format}}</td>
						<td><b @click="deleteDatum(uploadDatumData.id)">删除</b></td>
					</tr>
				</table>
				<el-upload
          class="upload-demo"
          ref="upload"
          action="http://d7e29def.ngrok.io/api/common/lectures/imageUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="selectFile"
          :show-file-list="false"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
			</div>
			<div style="margin: 0 20px;">
				<p style="line-height: 36px;">上传进度：</p>
				<table>
					<tr>
						<th>资料名称</th>
						<th>大小</th>
						<th>格式</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>{{file.name}}</td>
						<td>{{file.size}}</td>
						<td>{{file.type}}</td>
						<td><b></b></td>
					</tr>
				</table>
				<p>
					<el-button  size="small" type="primary">关闭</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
  export default {
    data() {
      return {
        uploadDatumData: [], // 要上传的资料数据
        fileList: [],
        file: {},
        tableData: [
          {
            id: 0,
            name: '测试下载的key',
            format: 'zip',
            price: '0.00',
            limit: '免费',
            uploadTime: '15542245455',
            downloadNum: 9,
            type: 'test',
            order: 12,
            size: '32kb'
          },
          {
            id: 1,
            name: '压缩文件',
            format: 'mp3',
            price: '10.00',
            limit: '收费',
            uploadTime: '15542245455',
            downloadNum: 4,
            type: '音频',
            order: 11,
            size: '32kb'
          },
          {
            id: 2,
            name: '文档文件',
            format: 'txt',
            price: '0.00',
            limit: '免费',
            uploadTime: '15542245455',
            downloadNum: 10,
            type: 'test',
            order: 10,
            size: '32kb'
          },
          {
            id: 3,
            name: 'x',
            format: 'zip',
            price: '0.00',
            limit: '免费',
            uploadTime: '15542245455',
            downloadNum: 5,
            type: 'test',
            order: 2,
            size: '32kb'
          }
        ]
      }
    },
    methods: {
      deleteDatum(id) { // 删除上传资料
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      selectFile(file, fileList) {
        this.file = file
        console.log(file)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      submitUpload() {
        this.$refs.upload.submit()
      }
    },
    mounted() {
      for (var i in this.tableData) {
        if (this.tableData[i].id === Number(this.$route.params.datumId)) {
          this.uploadDatumData = this.tableData[i]
        }
      }
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	h3{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		padding: 0 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.addBox {
		width: 100%;
		overflow: auto;
		background: #fff;
	}
	table,tr,td,th{
		border: 1px solid #ddd;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: center;
	}
	th{
		background: #f5fafe;
	}
	table{
		font-size: 12px;
		color: #333;
		width: 100%;
		line-height: 36px;
		margin-bottom: 20px;
	}
	b{
    	cursor: pointer;
    	font-weight: 500;
    }
	b:hover{
		color: #0A76A4;
	}
</style>
